<template>
	<view>
		<view @touchmove.stop.prevent="clear" class="model-container container model-animation" :class="[visible?'model_show':'model_hidden']">

			<view class="model-contents">

				<!-- <view class="close-botton" @click="closetip">×</view>
				<view class="model-titls">{{modeltitle}}</view> -->
				<view class="light">
					<image src="../../static/image/light.png" mode="aspectFill"></image>
				</view>
				<view class="goldicon">
					<image src="../../static/image/big-gold.png" mode="aspectFill"></image>
				</view>
				<view class="arcline"></view>

				<view class="mode-info">
					<text class="gold-title">恭喜您获得</text>
					<view class="glodnum">金币<text>+{{golds}}</text></view>
					<text class="small-gold">金币可用来兑换红包和商品~</text>
					<view class="glodbutton" @click="viewvideo">
						看视频奖励翻倍<text class="doubling">x2</text>
					</view>
				</view>
				
				<view class="closeicon" @click="closetip">
		
					<image src="../../static/image/closeicon.png"></image>
				</view>
			</view>
		</view>
		<!--遮罩层-->
		<view class="model-mask-bgcolor mask-bgcolor model-animation" :class="[visible?'model-bg-show':'model-bg-hidden']"></view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			modeltitle: {
				type: String,
				default: '提示'
			},
			golds:{
				type:[String,Number],
				default:0
			}
			
		},
		methods: {
			closetip() {
				uni.$emit('closewindown', false);
			},
			clear() {

			},
			//观看视频翻倍
			viewvideo(){
				this.$emit('watchvideo');
			}
			
		}
	}
</script>

<style lang="scss">
	.model-titls {
		font-size: 42rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: 90rpx;
	}
	.closeicon{
		position: absolute;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: -120rpx;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.goldicon {
		position: absolute;
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 88;
		top: -10rpx;
		image {
			width: 180rpx;
			height: 180rpx;
		}
	}

	.light {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 100%;
		top: -140rpx;
		animation: sunshine 6s linear infinite;

		image {
			width: 650rpx;
			height: 654rpx;
		}
		z-index: -1;

	}

	@keyframes sunshine {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}

	}

	.arcline {
		width: 100%;
		height: 210rpx;
		overflow: hidden;
		position: relative;
		background-color: #fff;
	}

	.arcline:after {
		content: '';
		background-color: #00c767;
		position: absolute;
		top: 0;
		
		left: -120rpx;
		width: 140%;
		height: 160rpx;
		z-index: 33;
		border-radius: 0 0 100% 100%;
	}

	.model-container,
	.model-mask-bgcolor {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 32rpx;
	}

	//动画开始
	.model-animation {
		transition: all 0.3s ease-in-out;
		transition-timing-function: cubic-bezier(.5, .49, .57, 1.41)
	}

	//背景隐藏
	.mask-bgcolor {
		background-color: #000;
		z-index: 22;
	}

	.model-bg-show {
		visibility: visible;
		opacity: 0.5
	}

	.model-bg-hidden {
		visibility: hidden;
		opacity: 0
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		flex-direction: column;
	}

	.model-contents {
		background-color: #fff;
		width: 80%;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.mode-info {
		margin: 0 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #494949;
		.small-gold{
			color: #808080;
			font-size: 25rpx;
		}
		.gold-title{
			font-size: 40rpx;
			font-weight: bold;
		}
		.glodnum{
			font-size: 28rpx;
			margin: 25rpx 0;
			text{
				
				font-size: 38rpx;
				font-weight: bold;
				color: #e9564f;
			}
		}
		.glodbutton {
			font-weight:bold ;
			width: 85%;
			margin: 20rpx auto;
			margin-bottom: 40rpx;
			height: 85rpx;
			background-color: #00c767;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
			.doubling{
				width: 50rpx;
				height: 35rpx;
				background-color: #fff;
				margin-left: 8rpx;
				border-radius: 20rpx;
				color: #00c767;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom-left-radius:0rpx;
			}
		}
	}

	.close-botton {
		height: auto;
		text-align: right;
		font-size: 60rpx;
		font-weight: normal;
		height: 60rpx;
		color: #c7c7c7;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
	}

	.model_show {
		visibility: visible;
		transform: scale(1);

	}

	.model_hidden {
		visibility: hidden;
		transform: scale(0);
		//opacity:0
	}
</style>
